<template>
	<view class="payment-dialog" v-if="showDialog">
		<view class="dialog-mask" @tap="closeDialog"></view>
		<view class="dialog-content">
			<view class="order-info">
				<view class="order-row">
					<text class="order-label">订单号：</text>
					<text class="order-value">{{orderData.orderNo}}</text>
				</view>
				<view class="order-row">
					<text class="order-label">支付金额：</text>
					<text class="order-value price">￥{{orderData.amount.toFixed(2)}}</text>
				</view>
				<view class="order-row" v-if="orderData.remark">
					<text class="order-label">备注：</text>
					<text class="order-value">{{orderData.remark}}</text>
				</view>
			</view>

			<!-- <view class="dialog-body">
				<text class="dialog-title">选择支付方式</text>

				<view class="payment-options">
					<view class="payment-option" :class="{ active: selectedPayment === 'wechat' }"
						@tap="selectPayment('wechat')">
						<view class="payment-option-icon wechat-icon">
							<image src="/static/wechat-icon.png" mode="aspectFit"></image>
						</view>
						<view class="payment-option-info">
							<text class="payment-option-name">微信支付</text>
						</view>
						<view class="payment-option-check">
							<text v-if="selectedPayment === 'wechat'" class="check-icon">✓</text>
						</view>
					</view>

					<view class="payment-option" :class="{ active: selectedPayment === 'alipay' }"
						@tap="selectPayment('alipay')">
						<view class="payment-option-icon alipay-icon">
							<image src="/static/alipay-icon.png" mode="aspectFit"></image>
						</view>
						<view class="payment-option-info">
							<text class="payment-option-name">支付宝</text>
						</view>
						<view class="payment-option-check">
							<text v-if="selectedPayment === 'alipay'" class="check-icon">✓</text>
						</view>
					</view>
				</view>
			</view> -->

			<view class="dialog-footer">
				<button class="pay-button" @tap="confirmPayment" >确认支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDialog: false,
				selectedPayment: '',
				orderData: {
					amount: 0,
					createTime: "",
					id: 4,
					orderNo: "",
					orderType: 3,
					outOrderNo: "",
					payStatus: 0,
					payTime: null,
					payType: 0,
					referId: "1",
					remark: "",
					userId: 1
				}
			}
		},
		methods: {
			openDialog(data) {
				this.orderData = data;
				this.showDialog = true;
			},
			closeDialog() {
				this.showDialog = false;
				this.selectedPayment = '';
			},
			selectPayment(type) {
				this.selectedPayment = type;
			},
			confirmPayment() {
				this.$emit('jsApiPay');//调用小程序支付
				/* if (!this.selectedPayment) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					});
					return;
				}

				if (this.selectedPayment === 'wechat') {
					// 调用微信支付
					this.$emit('wechatPayClick');
				} else if (this.selectedPayment === 'alipay') {
					// 调用支付宝支付
					this.$emit('alipayClick');
				} */
			},
		}


	}
</script>

<style>
	.payment-dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}

	.dialog-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.dialog-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
		animation: slideUp 0.3s ease-out;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.dialog-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 20rpx;
	}

	.dialog-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.dialog-close {
		font-size: 40rpx;
		color: #999999;
		padding: 10rpx;
	}

	.dialog-body {
		padding: 30rpx 0;
	}

	.order-info {
		background-color: #F8F8F8;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}

	.order-row {
		display: flex;
		margin-bottom: 10rpx;
	}

	.order-label {
		color: #666666;
		width: 160rpx;
	}

	.order-value {
		color: #333333;
		flex: 1;
	}

	.order-value.price {
		color: #FF6600;
		font-weight: bold;
	}

	.payment-options {
		margin-top: 20rpx;
	}

	.payment-option {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.payment-option.active {
		background-color: #F8F8F8;
	}

	.payment-option-icon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.payment-option-icon image {
		width: 100%;
		height: 100%;
	}

	.payment-option-info {
		flex: 1;
	}

	.payment-option-name {
		font-size: 28rpx;
		color: #333333;
	}

	.payment-option-check {
		width: 60rpx;
		text-align: center;
	}

	.check-icon {
		color: #07C160;
		font-size: 36rpx;
	}

	.dialog-footer {
		padding-top: 20rpx;
	}

	.pay-button {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #e39400;
		color: #FFFFFF;
		border-radius: 40rpx;
		font-size: 32rpx;
	}

	.pay-button[disabled] {
		background-color: #CCCCCC;
	}

	.wechat-icon {
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.alipay-icon {
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>